<script>
  import MdEditor from "$lib/components/common/MdEditor/MdEditor.svelte";
  import {
    crepeAPI,
    markdown,
    editorDisabled,
  } from "$lib/components/common/MdEditor/stores.js";
  
  // 直接使用响应式语法
  $: ({ onShare, update, setDisabled, isDisabled, toggleDisabled } = $crepeAPI);

  let editorRef;

  // WebSocket 流式状态（本地管理）
  let websocketState = {
    isConnected: false,
    isReceiving: false,
    data: "",
    speed: 100,
    chunkSize: 5,
  };

  let websocketSpeed = 100;
  let websocketChunkSize = 5;
  let websocketTimer = null;

  // 响应式获取 WebSocket 状态
  $: isWebSocketReceiving = websocketState.isReceiving;
  $: websocketDataLength = websocketState.data.length;

  // 初始化 markdown store
  markdown.set("# 欢迎使用 Milkdown\n\n这是一个功能强大的 Markdown 编辑器。\n\n## 特性\n\n- 实时预览\n- 丰富的插件\n- 响应式设计\n\n开始编写你的内容吧！");

  // 预设内容示例
  const presetContents = {
    empty: "",
    welcome: "# 欢迎使用 Milkdown\n\n这是一个功能强大的 Markdown 编辑器。",
    demo: '# 演示文档\n\n## 标题\n\n### 三级标题\n\n**粗体文本** 和 *斜体文本*\n\n> 这是一个引用块\n\n- 列表项 1\n- 列表项 2\n- 列表项 3\n\n```javascript\nconsole.log("Hello World!");\n```\n\n| 表格 | 演示 |\n|------|------|\n| 单元格1 | 单元格2 |\n| 单元格3 | 单元格4 |',
    task: "# 任务列表\n\n## 今日任务\n\n- [x] 完成 Markdown 编辑器\n- [ ] 添加更多功能\n- [ ] 优化性能\n\n## 明日计划\n\n- [ ] 代码重构\n- [ ] 文档编写\n- [ ] 测试用例",
  };

  // WebSocket 模拟数据
  const websocketContents = {
    chat: "# 聊天机器人回复\n\n用户：你好，请介绍一下 Markdown 编辑器\n\n机器人：你好！我很高兴为你介绍 Markdown 编辑器。\n\nMarkdown 是一种轻量级的标记语言，它允许你使用简单的语法来格式化文本。\n\n## 主要特点\n\n- **简洁易学**：语法简单，学习成本低\n- **跨平台兼容**：支持各种设备和平台\n- **所见即所得**：实时预览效果\n- **高度可定制**：支持主题和插件扩展\n\n## 常用语法\n\n```markdown\n# 一级标题\n## 二级标题\n**粗体** *斜体*\n[链接](url)\n```\n\n希望这个介绍对你有帮助！还有什么想了解的吗？",
    news: "# 🚀 科技新闻速递\n\n## 今日头条\n\n**人工智能技术取得新突破**\n\n据最新报道，研究人员在自然语言处理领域取得了重大进展...\n\n---\n\n## 技术更新\n\n### JavaScript 生态系统\n\n- **Svelte 5.0** 正式发布，带来了革命性的性能提升\n- **TypeScript 5.3** 增强了类型推断能力\n- **Vite 5.0** 优化了构建速度\n\n### 前端框架对比\n\n| 框架 | 性能 | 学习曲线 | 生态系统 |\n|------|------|----------|----------|\n| React | ⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ |\n| Vue | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ |\n| Svelte | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ |\n\n### 代码示例\n\n```javascript\n// 现代 JavaScript 异步处理\nasync function fetchData() {\n  try {\n    const response = await fetch('/api/data');\n    const data = await response.json();\n    return data;\n  } catch (error) {\n    console.error('获取数据失败:', error);\n  }\n}\n```\n\n---\n\n📰 **更多新闻请关注我们的官方频道**",
    tutorial: "# 📚 Markdown 完整教程\n\n欢迎来到 Markdown 学习之旅！\n\n## 目录\n\n1. [基础语法](#基础语法)\n2. [高级功能](#高级功能)\n3. [实践练习](#实践练习)\n\n---\n\n## 基础语法\n\n### 标题\n\n```markdown\n# 一级标题\n## 二级标题\n### 三级标题\n```\n\n### 文本样式\n\n- **粗体文本**：`**粗体**`\n- *斜体文本*：`*斜体*`\n- ~~删除线~~：`~~删除线~~`\n- `行内代码`：`` `代码` ``\n\n### 列表\n\n#### 无序列表\n\n- 项目 1\n- 项目 2\n  - 子项目 2.1\n  - 子项目 2.2\n- 项目 3\n\n#### 有序列表\n\n1. 第一步\n2. 第二步\n3. 第三步\n\n#### 任务列表\n\n- [x] 已完成的任务\n- [ ] 待完成的任务\n- [ ] 另一个任务\n\n### 引用\n\n> 这是一个引用块。\n> \n> 可以包含多行内容。\n\n### 链接和图片\n\n[访问 GitHub](https://github.com)\n\n![Markdown Logo](https://markdown-here.com/img/icon256.png)\n\n---\n\n## 高级功能\n\n### 代码块\n\n```python\ndef hello_world():\n    print(\"Hello, Markdown!\")\n    return \"学习愉快！\"\n\nresult = hello_world()\n```\n\n### 表格\n\n| 语言 | 难度 | 推荐指数 |\n|------|------|----------|\n| HTML | 简单 | ⭐⭐⭐⭐ |\n| CSS | 中等 | ⭐⭐⭐⭐ |\n| JavaScript | 中等 | ⭐⭐⭐⭐⭐ |\n| Python | 简单 | ⭐⭐⭐⭐⭐ |\n\n### 数学公式\n\n行内公式：$E = mc^2$\n\n块级公式：\n$$\\sum_{i=1}^{n} x_i = x_1 + x_2 + \\cdots + x_n$$\n\n---\n\n## 实践练习\n\n恭喜你完成了 Markdown 教程！现在你可以：\n\n✅ 使用基础语法格式化文本\n✅ 创建结构化的文档\n✅ 插入代码和表格\n✅ 使用高级功能\n\n**下一步**：尝试创建你自己的 Markdown 文档！"
  };

  function handleMarkdownChange(markdownText) {
    markdown.set(markdownText);
    console.log("Markdown 内容已更新:", markdownText);
  }

  function loadPresetContent(key) {
    const content = presetContents[key];
    markdown.set(content);
    update(content);
  }

  // WebSocket 流式输出功能
  function startWebSocketDemo(contentKey) {
    if (isWebSocketReceiving) return;
    
    const targetData = websocketContents[contentKey];
    
    // 清空数据并开始接收
    websocketState = {
      ...websocketState,
      isConnected: true,
      isReceiving: true,
      data: "",
      speed: websocketSpeed,
      chunkSize: websocketChunkSize,
    };
    
    // 清空编辑器
    markdown.set("");
    
    // 开始模拟 WebSocket 数据接收
    let currentIndex = 0;
    const chars = targetData.split('');
    
    const receiveChunk = () => {
      if (!websocketState.isReceiving || currentIndex >= chars.length) {
        websocketState = {
          ...websocketState,
          isReceiving: false,
        };
        return;
      }

      // 获取下一个数据块
      const endIndex = Math.min(currentIndex + websocketState.chunkSize, chars.length);
      const newChunk = chars.slice(currentIndex, endIndex).join('');
      const newData = websocketState.data + newChunk;
      
      // 更新状态
      websocketState = {
        ...websocketState,
        data: newData,
      };
      
      // 更新编辑器内容
      markdown.set(newData);
      update(newData);
      
      currentIndex = endIndex;
      
      if (currentIndex < chars.length) {
        websocketTimer = setTimeout(receiveChunk, websocketState.speed);
      }
    };
    
    receiveChunk();
  }

  function stopWebSocketDemo() {
    websocketState = {
      ...websocketState,
      isReceiving: false,
    };
    
    if (websocketTimer) {
      clearTimeout(websocketTimer);
      websocketTimer = null;
    }
  }

  function clearWebSocketData() {
    websocketState = {
      ...websocketState,
      data: "",
    };
    markdown.set("");
  }

  // 复制功能
  async function copyContent(format) {
    if (!editorRef) return;
    
    let success = false;
    switch (format) {
      case 'text':
        success = await editorRef.copyAsText();
        break;
      case 'html':
        success = await editorRef.copyAsHtml();
        break;
      case 'markdown':
        success = await editorRef.copyAsMarkdown();
        break;
      case 'office':
        success = await editorRef.copyAsOffice();
        break;
    }
    
    if (success) {
      console.log(`已复制为 ${format} 格式`);
    }
  }

  // 高亮关键词设置
  let highlightKeywords = ['重要', 'TODO', 'FIXME', 'NOTE', '注意'];

  // 添加关键词
  function addKeyword() {
    const keyword = prompt('请输入要高亮的关键词:');
    if (keyword && !highlightKeywords.includes(keyword)) {
      highlightKeywords = [...highlightKeywords, keyword];
    }
  }

  // 移除关键词
  function removeKeyword(keyword) {
    highlightKeywords = highlightKeywords.filter(k => k !== keyword);
  }

  // 编辑器控制功能
  function handleDisableEditor() {
    if (editorRef && setDisabled) {
      setDisabled(true);
      editorDisabled.set(true);
    }
  }

  function handleEnableEditor() {
    if (editorRef && setDisabled) {
      setDisabled(false);
      editorDisabled.set(false);
    }
  }

  function handleToggleEditor() {
    if (editorRef && toggleDisabled) {
      toggleDisabled();
      editorDisabled.update(v => !v);
    }
  }
</script>

<svelte:head>
  <title>Milkdown Editor Demo</title>
</svelte:head>

<div class="milkdown-demo-page">
  <h1>📝 Milkdown 编辑器演示</h1>

  <!-- 新增编辑器控制区域 -->
  <div class="editor-controls">
    <h3>🎛️ 编辑器控制：</h3>
    <div class="control-buttons">
      <button 
        class="btn control-btn disable-btn" 
        on:click={handleDisableEditor}
        disabled={$editorDisabled}
      >
        🔒 禁用编辑器
      </button>
      <button 
        class="btn control-btn enable-btn" 
        on:click={handleEnableEditor}
        disabled={!$editorDisabled}
      >
        🔓 启用编辑器
      </button>
      <button 
        class="btn control-btn toggle-btn" 
        on:click={handleToggleEditor}
      >
        🔄 切换状态
      </button>
      <div class="status-indicator">
        状态: 
        <span class="status-text" class:disabled={$editorDisabled}>
          {$editorDisabled ? '已禁用' : '已启用'}
        </span>
      </div>
    </div>
    <div class="control-description">
      <p>• <strong>禁用编辑器</strong>：阻止用户编辑内容，适用于只读模式</p>
      <p>• <strong>启用编辑器</strong>：恢复编辑功能</p>
      <p>• <strong>切换状态</strong>：在禁用和启用之间快速切换</p>
    </div>
  </div>

  <div class="preset-controls">
    <h3>快速加载预设内容：</h3>
    <div class="preset-buttons">
      <button class="btn" on:click={() => loadPresetContent("empty")}
        >清空</button
      >
      <button class="btn" on:click={() => loadPresetContent("welcome")}
        >欢迎页</button
      >
      <button class="btn" on:click={() => loadPresetContent("demo")}
        >完整演示</button
      >
      <button class="btn" on:click={() => loadPresetContent("task")}
        >任务列表</button
      >
    </div>
  </div>

  <div class="websocket-controls">
    <h3>🌐 WebSocket 流式演示：</h3>
    <div class="websocket-settings">
      <div class="setting-row">
        <label>
          接收速度 (毫秒/块):
          <input 
            type="range" 
            min="50" 
            max="500" 
            bind:value={websocketSpeed}
            disabled={isWebSocketReceiving}
          />
          <span>{websocketSpeed}ms</span>
        </label>
      </div>
      <div class="setting-row">
        <label>
          数据块大小 (字符/块):
          <input 
            type="range" 
            min="1" 
            max="1000" 
            bind:value={websocketChunkSize}
            disabled={isWebSocketReceiving}
          />
          <span>{websocketChunkSize} 字符</span>
        </label>
      </div>
      {#if isWebSocketReceiving}
        <div class="websocket-status">
          <div class="status-indicator receiving"></div>
          <span>正在接收数据... ({websocketDataLength} 字符)</span>
        </div>
      {:else if websocketState.isConnected}
        <div class="websocket-status">
          <div class="status-indicator connected"></div>
          <span>已连接 ({websocketDataLength} 字符)</span>
        </div>
      {:else}
        <div class="websocket-status">
          <div class="status-indicator disconnected"></div>
          <span>未连接</span>
        </div>
      {/if}
    </div>
    <div class="preset-buttons">
      <button 
        class="btn websocket-btn" 
        on:click={() => startWebSocketDemo("chat")}
        disabled={isWebSocketReceiving}
      >
        💬 AI 聊天回复
      </button>
      <button 
        class="btn websocket-btn" 
        on:click={() => startWebSocketDemo("news")}
        disabled={isWebSocketReceiving}
      >
        📰 新闻推送
      </button>
      <button 
        class="btn websocket-btn" 
        on:click={() => startWebSocketDemo("tutorial")}
        disabled={isWebSocketReceiving}
      >
        📚 教程文档
      </button>
      {#if isWebSocketReceiving}
        <button 
          class="btn stop-btn" 
          on:click={stopWebSocketDemo}
        >
          ⏹️ 停止接收
        </button>
      {/if}
      {#if websocketDataLength > 0}
        <button 
          class="btn clear-btn" 
          on:click={clearWebSocketData}
          disabled={isWebSocketReceiving}
        >
          🗑️ 清空数据
        </button>
      {/if}
    </div>
  </div>

  <div class="copy-controls">
    <h3>📋 复制功能：</h3>
    <div class="copy-buttons">
      <button 
        class="btn copy-btn text-btn" 
        on:click={() => copyContent('text')}
        disabled={!$markdown}
      >
        📄 复制纯文本
      </button>
      <button 
        class="btn copy-btn html-btn" 
        on:click={() => copyContent('html')}
        disabled={!$markdown}
      >
        🎨 复制带样式
      </button>
      <button 
        class="btn copy-btn office-btn" 
        on:click={() => copyContent('office')}
        disabled={!$markdown}
      >
        📊 复制到 Word
      </button>
      <button 
        class="btn copy-btn markdown-btn" 
        on:click={() => copyContent('markdown')}
        disabled={!$markdown}
      >
        📝 复制 Markdown
      </button>
    </div>
    <div class="copy-description">
      <p>• <strong>纯文本</strong>：移除所有格式，适合普通文本编辑器</p>
      <p>• <strong>带样式</strong>：HTML 格式，适合网页和邮件</p>
      <p>• <strong>复制到 Word</strong>：优化的 Word 格式，保持最佳兼容性</p>
      <p>• <strong>Markdown</strong>：保留原始代码，适合技术文档</p>
    </div>
  </div>

  <div class="plugin-controls">
    <h3>🔌 自定义插件功能：</h3>
    
    <div class="plugin-section">
      <h4>高亮关键词</h4>
      <div class="keywords-list">
        {#each highlightKeywords as keyword}
          <span class="keyword-tag">
            {keyword}
            <button class="remove-keyword" on:click={() => removeKeyword(keyword)}>×</button>
          </span>
        {/each}
        <button class="btn add-keyword-btn" on:click={addKeyword}>+ 添加关键词</button>
      </div>
    </div>

    <div class="plugin-section">
      <h4>表情符号快捷方式</h4>
      <p class="plugin-description">
        在编辑器中输入以下快捷码将自动转换为表情符号：
      </p>
      <div class="emoji-shortcuts">
        <code>:smile:</code> → 😄
        <code>:heart:</code> → ❤️
        <code>:thumbsup:</code> → 👍
        <code>:fire:</code> → 🔥
        <code>:rocket:</code> → 🚀
        <code>:star:</code> → ⭐
        <code>:check:</code> → ✅
        <code>:warning:</code> → ⚠️
      </div>
    </div>

    <div class="plugin-section">
      <h4>快捷键</h4>
      <div class="shortcuts-list">
        <div class="shortcut-item">
          <kbd>Ctrl/Cmd + Shift + D</kbd>
          <span>插入当前日期</span>
        </div>
        <div class="shortcut-item">
          <kbd>Ctrl/Cmd + Shift + T</kbd>
          <span>插入当前时间</span>
        </div>
      </div>
    </div>
  </div>

  <div class="editor-section">
    <MdEditor
      bind:this={editorRef}
      bind:content={$markdown}
      bind:disabled={$editorDisabled}
      {highlightKeywords}
      onChange={handleMarkdownChange}
    />
  </div>

  {#if $markdown}
    <div class="content-preview">
      <h3>当前内容：</h3>
      <details>
        <summary>查看 Markdown 源码 ({$markdown.length} 字符)</summary>
        <pre class="markdown-source">{$markdown}</pre>
      </details>
    </div>
  {/if}

  <div class="ai-rewrite-controls">
    <h3>🤖 AI 改写助手 - 豆包风格：</h3>
    <div class="ai-features">
      <div class="ai-feature-item">
        <div class="ai-feature-icon">✨</div>
        <div class="ai-feature-content">
          <h4>智能改写</h4>
          <p>选中文本自动显示"需要我帮你改写吗？"</p>
        </div>
      </div>
      <div class="ai-feature-item">
        <div class="ai-feature-icon">💬</div>
        <div class="ai-feature-content">
          <h4>自定义指令</h4>
          <p>输入框支持自定义改写指令，AI 按需求执行</p>
        </div>
      </div>
      <div class="ai-feature-item">
        <div class="ai-feature-icon">🎯</div>
        <div class="ai-feature-content">
          <h4>快捷操作</h4>
          <p>润色、扩写、缩写、调整语气、解释等一键操作</p>
        </div>
      </div>
    </div>
    <div class="ai-usage-tip">
      <strong>使用方法：</strong>选中编辑器中的文本，会出现豆包风格的 AI 改写面板。可以直接点击快捷操作，或在输入框中输入自定义指令。支持调整语气（正式、轻松、专业、友好）等高级功能。
    </div>
  </div>
</div>

<style>
  .milkdown-demo-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
      sans-serif;
  }

  h1 {
    color: #24292f;
    border-bottom: 1px solid #d0d7de;
    padding-bottom: 10px;
    margin-bottom: 30px;
  }

  .editor-controls {
    margin-bottom: 20px;
    padding: 15px;
    background: #fff5f5;
    border-radius: 8px;
    border: 1px solid #ef4444;
  }

  .editor-controls h3 {
    margin: 0 0 15px 0;
    color: #dc2626;
    font-size: 14px;
  }

  .control-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 15px;
  }

  .control-btn {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
  }

  .disable-btn {
    background: #ef4444;
    color: white;
    border-color: #ef4444;
  }

  .disable-btn:hover:not(:disabled) {
    background: #dc2626;
    border-color: #dc2626;
  }

  .enable-btn {
    background: #10b981;
    color: white;
    border-color: #10b981;
  }

  .enable-btn:hover:not(:disabled) {
    background: #059669;
    border-color: #059669;
  }

  .toggle-btn {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
  }

  .toggle-btn:hover {
    background: #2563eb;
    border-color: #2563eb;
  }

  .control-btn:disabled {
    background: #d1d5db;
    color: #9ca3af;
    border-color: #d1d5db;
    cursor: not-allowed;
  }

  .status-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: #374151;
  }

  .status-text {
    font-weight: 600;
    color: #10b981;
  }

  .status-text.disabled {
    color: #ef4444;
  }

  .control-description {
    font-size: 11px;
    color: #78716c;
    line-height: 1.4;
  }

  .control-description p {
    margin: 4px 0;
  }

  .control-description strong {
    color: #dc2626;
  }

  .preset-controls {
    margin-bottom: 20px;
    padding: 15px;
    background: #f6f8fa;
    border-radius: 8px;
    border: 1px solid #d0d7de;
  }

  .preset-controls h3 {
    margin: 0 0 10px 0;
    color: #24292f;
    font-size: 14px;
  }

  .preset-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }

  .btn {
    padding: 6px 12px;
    border: 1px solid #d0d7de;
    border-radius: 4px;
    background: white;
    color: #24292f;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
  }

  .btn:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
  }

  .editor-section {
    margin-bottom: 30px;
    border: 1px solid #d0d7de;
    border-radius: 8px;
    overflow: hidden;
  }

  .content-preview {
    padding: 20px;
    background: #f6f8fa;
    border-radius: 8px;
    border: 1px solid #d0d7de;
  }

  .content-preview h3 {
    margin: 0 0 15px 0;
    color: #24292f;
  }

  .markdown-source {
    margin: 10px 0 0 0;
    padding: 15px;
    background: #fff;
    border: 1px solid #d0d7de;
    border-radius: 4px;
    font-size: 12px;
    color: #24292f;
    max-height: 400px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
  }

  .websocket-controls {
    margin-bottom: 20px;
    padding: 15px;
    background: #f0fdf4;
    border-radius: 8px;
    border: 1px solid #16a34a;
  }

  .websocket-controls h3 {
    margin: 0 0 15px 0;
    color: #15803d;
    font-size: 14px;
  }

  .websocket-settings {
    margin-bottom: 15px;
  }

  .setting-row {
    margin-bottom: 10px;
  }

  .setting-row:last-child {
    margin-bottom: 0;
  }

  .setting-row label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: #374151;
  }

  .setting-row input[type="range"] {
    flex: 1;
    max-width: 150px;
  }

  .setting-row span {
    min-width: 70px;
    font-weight: 500;
  }

  .websocket-status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 4px;
    font-size: 12px;
  }

  .status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
  }

  .status-indicator.connected {
    background: #16a34a;
    animation: pulse-green 2s ease-in-out infinite;
  }

  .status-indicator.receiving {
    background: #3b82f6;
    animation: pulse-blue 1s ease-in-out infinite;
  }

  .status-indicator.disconnected {
    background: #6b7280;
  }

  .websocket-btn {
    background: #16a34a;
    color: white;
    border-color: #16a34a;
  }

  .websocket-btn:hover:not(:disabled) {
    background: #15803d;
    border-color: #15803d;
  }

  .websocket-btn:disabled {
    background: #94a3b8;
    border-color: #94a3b8;
    cursor: not-allowed;
  }

  .clear-btn {
    background: #f59e0b;
    color: white;
    border-color: #f59e0b;
  }

  .clear-btn:hover:not(:disabled) {
    background: #d97706;
    border-color: #d97706;
  }

  .copy-controls {
    margin-bottom: 20px;
    padding: 15px;
    background: #fefbf3;
    border-radius: 8px;
    border: 1px solid #f59e0b;
  }

  .copy-controls h3 {
    margin: 0 0 15px 0;
    color: #92400e;
    font-size: 14px;
  }

  .copy-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 15px;
  }

  .copy-btn {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
  }

  .text-btn {
    background: #6b7280;
    color: white;
    border-color: #6b7280;
  }

  .text-btn:hover:not(:disabled) {
    background: #4b5563;
    border-color: #4b5563;
  }

  .html-btn {
    background: #8b5cf6;
    color: white;
    border-color: #8b5cf6;
  }

  .html-btn:hover:not(:disabled) {
    background: #7c3aed;
    border-color: #7c3aed;
  }

  .office-btn {
    background: #217346;
    color: white;
    border-color: #217346;
  }

  .office-btn:hover:not(:disabled) {
    background: #0e5a2b;
    border-color: #0e5a2b;
  }

  .markdown-btn {
    background: #f59e0b;
    color: white;
    border-color: #f59e0b;
  }

  .markdown-btn:hover:not(:disabled) {
    background: #d97706;
    border-color: #d97706;
  }

  .copy-btn:disabled {
    background: #d1d5db;
    color: #9ca3af;
    border-color: #d1d5db;
    cursor: not-allowed;
  }

  .copy-description {
    font-size: 11px;
    color: #78716c;
    line-height: 1.4;
  }

  .copy-description p {
    margin: 4px 0;
  }

  .copy-description strong {
    color: #92400e;
  }

  .plugin-controls {
    margin-bottom: 20px;
    padding: 15px;
    background: #f0f6ff;
    border-radius: 8px;
    border: 1px solid #3b82f6;
  }

  .plugin-controls h3 {
    margin: 0 0 15px 0;
    color: #1d4ed8;
    font-size: 14px;
  }

  .plugin-section {
    margin-bottom: 15px;
  }

  .plugin-section:last-child {
    margin-bottom: 0;
  }

  .plugin-section h4 {
    margin: 0 0 8px 0;
    font-size: 13px;
    color: #1e40af;
  }

  .plugin-description {
    margin: 0 0 8px 0;
    font-size: 12px;
    color: #64748b;
  }

  .keywords-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
  }

  .keyword-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    background: #dbeafe;
    color: #1e40af;
    border-radius: 12px;
    font-size: 11px;
  }

  .remove-keyword {
    background: none;
    border: none;
    color: #ef4444;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .add-keyword-btn {
    font-size: 11px;
    padding: 2px 8px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 12px;
  }

  .emoji-shortcuts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
    font-size: 12px;
  }

  .emoji-shortcuts code {
    background: #f1f5f9;
    padding: 2px 4px;
    border-radius: 3px;
    font-size: 11px;
  }

  .shortcuts-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .shortcut-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
  }

  kbd {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 3px;
    padding: 2px 6px;
    font-size: 11px;
    font-family: monospace;
  }

  @keyframes pulse-green {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.7); }
    50% { opacity: 0.8; box-shadow: 0 0 0 4px rgba(22, 163, 74, 0); }
  }

  @keyframes pulse-blue {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); }
    50% { opacity: 0.8; box-shadow: 0 0 0 4px rgba(59, 130, 246, 0); }
  }

  .ai-rewrite-controls {
    margin-bottom: 20px;
    padding: 15px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 8px;
    color: white;
  }

  .ai-rewrite-controls h3 {
    margin: 0 0 15px 0;
    color: white;
    font-size: 14px;
  }

  .ai-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 15px;
  }

  .ai-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: rgba(255, 255, 255, 0.1);
    padding: 12px;
    border-radius: 6px;
  }

  .ai-feature-icon {
    font-size: 20px;
    flex-shrink: 0;
  }

  .ai-feature-content h4 {
    margin: 0 0 4px 0;
    font-size: 13px;
    font-weight: 600;
  }

  .ai-feature-content p {
    margin: 0;
    font-size: 12px;
    opacity: 0.9;
    line-height: 1.4;
  }

  .ai-usage-tip {
    background: rgba(255, 255, 255, 0.15);
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.4;
  }

  .ai-usage-tip strong {
    color: #fff;
  }
</style>
